<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>列表</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="format-detection" content="telephone=no, email=no"/>

    <meta name="keywords" content="商城">
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- 手机百度搜索打开网页时,不需要为网页进行转码-->
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <link rel="icon" type="image/png" href="$!webPath/resources/app/mcjd/images/logo.png">
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" type="text/css" href="$!webPath/resources/app/mcjd/css/common_jmc.css"/>
    <link rel="stylesheet" type="text/css" href="$!webPath/resources/app/mcjd/css/jmc_icon.css"/>
    <style type="text/css">
        .h_38{height:38px;}
        .wp_tabsort{overflow:hidden;position:fixed;top:45px;z-index:9998;width:100%;height:38px;line-height:38px;font-size:0;background:#fff;}
        .wp_tabsort a{float:left;width:50%;font-size:14px;color:#282828;text-align:center;}
        .wp_tabsort a:after{content:'';display:inline-block;width:7px;height:12px;margin-left:8px;background:url('$!webPath/resources/app/mcjd/images/ico_4.png') center center no-repeat;background-size:100% 100%;vertical-align:middle;}
        .wp_tabsort a.active{color:#fc5637;}
        .wp_tabsort a.s__asc:after{background-image:url('$!webPath/resources/app/mcjd/images/ico_5.png');}
        .wp_tabsort a.s__desc:after{background-image:url('$!webPath/resources/app/mcjd/images/ico_6.png');}
    </style>
    <link rel="stylesheet" type="text/css" href="$!webPath/resources/app/mcjd/css/jmc_list.css"/>
    <script type="text/javascript" src="$!webPath/resources/app/mcjd/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="$!webPath/resources/app/mcjd/js/template.js"></script>
    <!--script type="text/javascript" src="$!webPath/resources/app/mcjd/js/combase.js"></script-->
    <script type="text/javascript">
    var __shareTitle = '【一家】社区包邮购，买啥都包邮';
    var __sharePicture = '$!webPath/resources/app/orgShipfree/images/logo.png';
    var __shareContent = '就这么任性~';
    var __shareUrl = window.location.href;
    window._URI_ = {
        IP0: '$!mallBaseurl', // 本地
        IP1: 'http://testmall.yijiahn.com/mall' // 开发环境
    }
    window._URL_ = {
        shareparams: _URI_.IP0 + '/app/wx/shareparams.json', // 分享
        goodslist: _URI_.IP0 + '/app/category/goods/list.json' // 商品列表 app/orgShipfree/goodslist.json?pageNo=&priceMin=&priceMax=&classId=&key=&priceSort=&salesSort=     priceSort,salesSort 1升序 0降序
    };
    </script>
</head>
<body style="background:#f2f2f2;">
    
    <div id="bxTopbar">
        <div class="bx_topbar">
            <div class="h_44"></div>
            <div class="wp_topbar">
                <div class="it_btn it_back_btn" onclick="javascript:history.back(-1);"><i class="icon ico_1"></i></div>
                <a class="it_btn it_classify_btn" href="gdClassify.htm?orgId=$!orgId&accessToken=$!accessToken"><i class="icon ico_2"></i></a>
                <div class="it_toptt">列表</div>
            </div>
        </div>

        <div class="bx_tabsort">
            <div class="h_38"></div>
            <div id="wpTabsort" class="wp_tabsort">
                <a s_sort="sale">销量</a>
                <a s_sort="price">价格</a>
            </div>
        </div>
    </div>

    <div class="md1">
        <div class="ulbg ulbg_2">
            <ul class="clearfix" id="resGdList">
                <!-- <li>
                    <div class="imgwidth">
                        <span>
                            <img src="$!webPath/resources/app/mcjd/images/img1.png">
                        </span>
                        <i class="it_fg0">团购</i>
                        <i class="it_fg1">1天53:12:09后结束</i>
                    </div>
                    <div class="widthtitle">
                        <div class="titlefont">
                            <div class="titleimg"></div>【仅售39.9】韩国进口丽得姿LEADE ...</div>
                        <div class="priceall">
                            <div class="leftprice">39.90</div>
                            <div class="rightprice">11已售</div>
                        </div>
                    </div>
                </li> -->
            </ul>
        </div>
        
        <div id="resNoData"><div class="no_loaddata"></div></div>
    </div>   

    <!-- 模板 -->
    <script type="text/html" id="tmplGdList">
        {{each goodsList as item ind}}
        <li it_goodsId="{{item.goodsId}}" onclick="javascript:togoodsdetail('{{item.goodsId}}', '{{item.url}}');">
            <div class="imgwidth">
                <span><img ig_crop="max" src="{{item.mainPhoto.smallPicUrl}}"></span>
				{{if item.goodstypepool == 3}}
                <i class="it_fg0">团购</i>
                <i class="it_fg1">1天53:12:09后结束</i>
				{{/if}}
            </div>
            <div class="widthtitle">
                <div class="titlefont"><div class="titleimg"></div>{{item.name}}</div>
                <div class="priceall">
                    <div class="leftprice">{{item.priceShow}}</div>
                    <div class="rightprice">{{item.salenum}}已售</div>
                </div>
            </div>
        </li>
        {{/each}}
    </script>
    <script type="text/html" id="tmplNoData">
        {{if getArrNum(goodsList) <= 0 && '0' == pageNo}}
        <div class="no_data_pg">
            <img src="$!webPath/resources/app/mcjd/images/ico9.png"><p>该推荐专区下没有商品</p>
        </div>
        {{else if getArrNum(goodsList) < 1}}
        <div class="no_moredata">
            <img src="$!webPath/resources/app/mcjd/images/ico9.png" width="41" /><p>别拉啦 到底啦</p>
        </div>
        {{else}}
            <div class="no_loaddata"></div>
        {{/if}}
    </script>
    <script type="text/html" id="tmplErrorData">
        <div class="no_errordata">
            <div class="error_refresh_btn"><img src="$!webPath/resources/app/mcjd/images/ico_7.png" width="26" /><p>出错了，点击刷新</p></div>
        </div>
    </script>
    <script type="text/javascript">
        template.helper("getArrNum", function(val){
            var n = val.length || 0;
            return n;
        });
    </script>

    <script type="text/javascript" src="$!webPath/resources/app/mcjd/js/touch.min.js"></script>
    <script type="text/javascript" src="$!webPath/resources/app/mcjd/js/imgSetSize.min.js"></script>
    <script type="text/javascript" src="$!webPath/resources/app/mcjd/js/utils.js"></script>
    <script type="text/javascript">
        var __isApp_, __srcApp_, __appversion_, __url_, __isWeixin_ = Utils.isWeixin();
        var _key="";
        var _orgFlag=1,_jdStoreId="$!jdStoreId",_goodsClassId="$!goodsClassId";
        var _orgId = "$!orgId",_accessToken="$!accessToken";
        Utils.lsRemove("_isApp");
        var _isIos = Utils.isiOs();
        var _isApp = Utils.isApp(__isApp_);

        // 跳转
        function togoodsdetail(c_goodsId, c_url) {
            window.location.href = c_url +"&accessToken="+_accessToken+"&orgId="+_orgId;
            /*
            if(!_isApp || '0' == _isApp) {
                window.location.href = c_url +"&accessToken="+_accessToken+"&orgId="+_orgId;
            }else{
                Utils.sendMsgToApp('/togoodsdetail?goodsid='+encodeURIComponent(c_goodsId));
            }
            */
        };
        
        jQuery(function($) {
            var _sprice = null, _ssale = 0;
            $('#wpTabsort').on('click', 'a', function() {
                var _bx = $('#wpTabsort');
                var _tp = $(this).attr('s_sort');
                $(this).addClass('active').siblings('a').removeClass('active');
                if('price' == _tp) {
                    _ssale = null;
                    if($(this).hasClass('s__desc')) {
                        _sprice = 1;
                        $(this).removeClass('s__desc').addClass('s__asc').siblings('a').removeClass();
                    }else {
                        _sprice = 0;
                        $(this).addClass('s__desc').siblings('a').removeClass();
                    }
                }else if('sale' == _tp) {
                    _sprice = null;
                    if($(this).hasClass('s__desc')) {
                        _ssale = 1;
                        $(this).removeClass('s__desc').addClass('s__asc').siblings('a').removeClass();
                    }else {
                        _ssale = 0;
                        $(this).addClass('s__desc').siblings('a').removeClass();
                    }
                }
                if(_key && _key.length > 0) {
                    pageNo = 0, pageFlag = false;
                    $('#resNoData').html('<div class="no_loaddata"></div>');
                    $('#resGdList').html('');
                    get_Goodslist();
                };
            });

            var pageNo = 0, pageSize = 20, pageFlag = false;
            // 商品列表
            function get_Goodslist() {
            	/*
                if(!_key || _key.length <= 0) {
                    Utils.showToast("请输入搜索关键字！");
                    return;
                };
                */
                pageFlag = false;
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    timeout: 15000,
                    url: _URL_.goodslist,
                    data: {
                    	orgFlag: _orgFlag,
                    	storeId: _jdStoreId,
                    	classId: _goodsClassId,
                        key: _key,
                        salesSort: _ssale,
                        priceSort: _sprice,
                        pageNo: pageNo
                    },
                    success: function(res) {
                        pageFlag = true;
                        if ("100" === res.code) {
                            res.data.goodsList = res.data.list || [];
                            if(res.data && res.data.goodsList && res.data.goodsList.length < 1) {
                                pageFlag = false;
                            }
                            res.data.pageNo = pageNo;
                            res.data.pageSize = pageSize;
                            var html = template('tmplGdList', res.data);
                            $('#resGdList').append(html);
                            var nohtml = template('tmplNoData', res.data);
                            $('#resNoData').html(nohtml);

                            $("img[ig_crop='max']").imgSetSize();
                        } else if ("401" === res.code) { //App端请求，需要登录
                            Utils.showToast("请登录后再操作！");
                        } else if ("405" === res.code) { //微信端请求，需要登录
                            Utils.showToast("请先微信授权后再操作！");
                        } else {
                            pageNo -= 1;
                            pageFlag = false;
                            var errorhtml = template('tmplErrorData', {});
                            $('#resNoData').html(errorhtml);
                            console.log('请求出错: ' + _URL_.goodslist);
                            Utils.showToast(res.code + ":" + res.msg || '请求出错');
                        }
                    },
                    error: function(xhr) {
                        pageNo -= 1;
                        pageFlag = false;
                        var errorhtml = template('tmplErrorData', {});
                        $('#resNoData').html(errorhtml);
                        console.log('请求出错: ' + _URL_.goodslist);
                        var msg = "请求出错(请检查相关网络状况)";
                        Utils.showToast(msg);
                    }
                });
            };
            
            $('#resNoData').on('click', '.error_refresh_btn', function() {
                $('#resNoData').html('<div class="no_loaddata"></div>');
                get_Goodslist();
            });
            
            window.onscroll = function() {
                if(pageFlag){
                    //获取当前可视范围的高度
                    var clientHeight = 0;
                    if (document.body.clientHeight && document.documentElement.clientHeight) {
                        clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
                    }else {
                        clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
                    }
                    // 滚动条位置
                    var scrollTop = 0;
                    if (document.documentElement && document.documentElement.scrollTop) {
                        scrollTop = document.documentElement.scrollTop;
                    }
                    else if (document.body) {
                        scrollTop = document.body.scrollTop;
                    }
                    // 获取文档完整的高度
                    var scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
                    // 判断加载
                    if (Math.ceil(scrollTop + clientHeight) >= scrollHeight) {
                        pageFlag = false;
                        pageNo += 1;
                        get_Goodslist();
                    }
                }
            };
            
            pageNo += 1;
            get_Goodslist();
        });
    </script>

</body>
</html>